<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>博客发布</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="../static/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
		<link href="../static/css/bootstrap-fileinput/fileinput.min.css" rel="stylesheet" />
		<link href="../static/lib/editormd/css/editormd.min.css" rel="stylesheet" />
		<link href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css" rel="stylesheet">
		<link href="../static/css/index.css" rel="stylesheet" />
	</head>
	
	<body>
		<div id="head"></div>
		<div class="ui attached pointing menu">
			<div class="ui container">
				<div class="right menu">
					<a href="blogs-input.html?type=add" class=" teal active item">发布</a>
					<a href="blogs.html" class=" item">列表</a>
				</div>
			</div>
		</div>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：内容
        -->
		<div class="i-padded-tb-big i-container-small">
			<div class="ui container">
				<form id="blog-form" action="#" class="ui form">
					<input type="hidden" name="published" id="published">
					<div class="required field">
						<div class="ui left labeled input">
							<div class="ui  compact teal basic label">
								<select id="flag" class="ui selection">
									<option value="原创">原创</option>
									<option value="转载">转载</option>
									<option value="翻译">翻译</option>
								</select>
								<!-- 								<input type="hidden" value="原创" name="flag" id="flag">
								<i class="dropdown icon"></i>
								<div class="text">原创</div>
								<div class="menu">
									<div class="item" data-value="原创">原创</div>
									<div class="item" data-value="转载">转载</div>
									<div class="item" data-value="翻译">翻译</div>
								</div> -->
							</div>
							<input type="text" name="title" placeholder="标题" id="title">

						</div>
					</div>

					<div class="required field">
						<div id="md-content" style="z-index: 1 !important;">
							<textarea placeholder="博客内容" name="content" style="display: none" id="content"></textarea>
						</div>
					</div>

					<div class="two fields">
						<div class="required field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">分类</label>
								<select id="type" class="ui select"></select>
								<!--								<div class="ui fluid selection dropdown">
									<input type="hidden" name="type.id">
									<i class="dropdown icon"></i>
									<div class="default text">分类</div>
									<div class="menu">
										<div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
									</div>
								</div>-->
							</div>
						</div>
						<div class=" field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">标签</label>
								<select class="ui select" id="tag"></select>
								<!--<div class="ui fluid selection multiple search  dropdown">
									<input type="hidden" name="tagIds" th:value="*{tagIds}">
									<i class="dropdown icon"></i>
									<div class="default text">标签</div>
									<div class="menu">
										<div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">java</div>
									</div>
								</div>-->
							</div>
						</div>
					</div>

					<div class="required field">
						<div class="ui left labeled input">
							<label class="ui teal basic label">首图</label>
							<input type="text" name="firstPicture" placeholder="首图引用地址" id="firstPicture">
						</div>
					</div>

					<div class="required field">
						<div class="ui left labeled input">
							<label class="ui teal basic label">上传</label>
						</div>
					</div>
					<div id="uploadDiv">
						<input type="file" id="picture" name="file" />
					</div>

					<div class="required field" style="margin-top: 5px;">
						<textarea name="description" placeholder="博客描述..." maxlength="200" id="description"></textarea>
					</div>

					<div class="inline fields">
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" id="recommend" name="recommend" checked class="hidden">
								<label for="recommend">推荐</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" id="shareStatement" name="shareStatement" class="hidden">
								<label for="shareStatement">转载声明</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" id="appreciation" name="appreciation" class="hidden">
								<label for="appreciation">赞赏</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" id="commentabled" name="commentabled" class="hidden">
								<label for="commentabled">评论</label>
							</div>
						</div>
					</div>
					
					<div id="reprintDiv" style="display: none;">
						<div class="required field">
							<div class="ui left labeled input">
								<label class="ui teal basic label">原博客地址</label>
								<input type="text" name="reprintAddr" placeholder="原博客地址" id="reprintAddr">
							</div>
						</div>
						
						<div class="required field">
							<div class="ui left labeled input">
								<label class="ui teal basic label">原作者和出处</label>
								<input type="text" name="reprintFrom" placeholder="原作者和出处" id="reprintFrom">
							</div>
						</div>
						
						<div class="required field">
							<div class="ui left labeled input">
								<label class="ui teal basic label">github地址</label>
								<input type="text" name="github" placeholder="github地址" id="github">
							</div>
						</div>
						
						<div class="required field">
							<div class="ui left labeled input">
								<label class="ui teal basic label">码云地址</label>
								<input type="text" name="mayun" placeholder="码云地址" id="mayun">
							</div>
						</div>
						
						<div class="required field">
							<div class="ui left labeled input">
								<label class="ui teal basic label">原作者二维码或公众号</label>
								<input type="text" name="qrcode" placeholder="原作者二维码或公众号" id="qrcode">
							</div>
						</div>
					</div>
					<div class="ui error message"></div>

					<div class="ui right aligned container" style="margin-top: 5px;">
						<button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
						<button type="button" id="save-btn" class="ui secondary button">发布</button>
<!--						<button type="button" id="publish-btn" class="ui teal button">发布</button>
-->					</div>

				</form>
			</div>
		</div>

		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：footer
        -->
		<div id="foot"></div>

	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
	<script src="../static/js/bootstrap/bootstrap.min.js"></script>
	<script src="../static/js/bootstrap-fileinput/fileinput.min.js"></script>
	<script src="../static/js/bootstrap-fileinput/zh.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
	<script src="../static/js/function.js"></script>
	<script src="../static/lib/editormd/editormd.min.js"></script>
	<script>
		$('.menu.toggle').click(function() {
			$('.i-item').toggleClass('i-mobile-hide');
		});

		$('.ui.dropdown').dropdown({
			on: 'hover'
		});

		var contentEditor;
		var count = 0;
		var map = {};
		var pageType = "";
		var blogId = 0;
		$(function() {
			$('#head').load('../common/head-admin.html',null,function(){
				$('.navbarlist a').removeClass('active');
				$('.navbarlist a:eq(0)').addClass('active');
			});
			$('#foot').load('../common/foot.html');
			getSelectInit();
			pageType = getQueryVariable("type");
			blogId = getQueryVariable("id");
			$('#head').load('../common/head-admin.html');
			fileInit('picture', urlPath + '/upload/api/upload');
			if (pageType == 'add') {
				contentEditor = editormd("md-content", {
					width: "100%",
					height: 640,
					syncScrolling: "single",
					path: "../static/lib/editormd/lib/",
					saveHTMLToTextarea: true,
					flowChart: true, // 开启流程图支持，默认关闭
					/* 上传图片配置 */
					imageUpload: true,
					imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
					imageUploadURL: mdurlPath+"/upload/api/uploadImage", //注意你后端的上传图片服务地址
					onload: function() {
						//引入图片截图插件
						editormd.loadPlugin("../static/lib/editormd/plugins/image-hanle-paste/image-handle-paste",function(){
							contentEditor.imagePaste();
						});
					}
				});
			} else if (pageType == 'edit') {
				blogEditInit();
			}
		});

		function transformData() {
			map.flag = $('#flag').val();
			map.title = $('#title').val();
			map.content = contentEditor.getMarkdown();
			map.contentHtml = contentEditor.getHTML();
			if ($('#type').val() != '请选择') {
				map.typeId = $('#type').val();
				map.typeName = $('#type').find('option:selected').attr('name');
			} else {
				map.typeId = '';
				map.typeName = '';
			}
			if ($('#tag').val() != '请选择') {
				map.tagId = $('#tag').val();
				map.tagName = $('#tag').find('option:selected').attr('name');
			} else {
				map.tagId = '';
				map.tagName = '';
			}
			map.firstPicture = $('#firstPicture').val();
			map.description = $('#description').val();
			map.recommend = $('input[name="recommend"]').prop('checked');
			map.shareStatement = $('input[name="shareStatement"]').prop('checked');
			map.appreciation = $('input[name="appreciation"]').prop('checked');
			map.commentabled = $('input[name="commentabled"]').prop('checked');
			map.picture_Name = $('#picture').attr('fileName') == undefined ? '' : $('#picture').attr('fileName');
			map.picture_Path = $('#picture').attr('filePath') == undefined ? '' : $('#picture').attr('filePath');
			map.picture_Addr = $('#picture').attr('fileAddr') == undefined ? '' : $('#picture').attr('fileAddr');
			map.pageType = pageType;
			map.userId = $.cookie('userid');
			map.reprintAddr = $('#reprintAddr').val();
			map.reprintFrom = $('#reprintFrom').val();
			map.github = $('#github').val();
			map.mayun = $('#mayun').val();
			map.qrcode = $('#qrcode').val();
			if(pageType=='edit'){
				map.blogId = blogId;
			}
			$.ajax({
				url: urlPath + "/blog/api/saveOrUpdateBlog",
				data: map,
				type: "post",
				success: function(res) {
					if (res.code == 200) {
						propSuccess(res, function() {
							window.location.href = "blogs.html";
						})
					} else {
						propFailReload(res,function(){
							
						})
					}
				}
			})
		}


		function fileInit(ctrlName, uploadUrl) {
			var control = $('#' + ctrlName);
			control.fileinput({
				language: 'zh',
				uploadUrl: uploadUrl,
				enctype: 'multipart/form-data',
				showUpload: false, //是否显示上传按钮
				showPreview: true, //展前预览
				showRemove: true,
				showCaption: false, //是否显示标题
				maxFileSize: 51200, //上传文件最大的尺寸kb 50m
				dropZoneEnabled: true, //是否显示拖拽区域
				browseClass: "btn btn-primary", //按钮样式
				uploadAsync: true, //默认异步上传
			}).on('fileuploaded', function(event, data, previewId, index) {
				count--;
				control.attr("fileName", data.response.data.fileName);
				control.attr("filePath", data.response.data.filePath);
				control.attr("fileAddr", data.response.data.fileAddr);
				if (count == 0) {
					transformData();
				}
			}).on('filebatchuploadsuccess', function(event, data, previewId, index) { //同步上传回调
				count--;
				control.attr("fileName", data.response.data.fileName);
				control.attr("filePath", data.response.data.filePath);
				control.attr("fileAddr", data.response.data.fileAddr);
				if (count == 0) {
					transformData();
				}
			});
		}

		$('#save-btn').on('click', function() {
			var picture = $('#picture').val().trim();
			if (picture != '') {
				count++;
				$('#picture').fileinput('upload');
			} else {
				transformData();
			}
		})

		function getSelectInit() {
			$.ajax({
				url: urlPath + "/blog/api/getBlogSelectList",
				type: "get",
				success: function(res) {
					if (res.code === 200) {
						var typeHtml = $("#type");
						typeHtml.append("<option>请选择</option>");
						for (var i = 0; i < res.data.types.length; i++) {
							typeHtml.append("<option name=" + res.data.types[i].name + " value=" + res.data.types[i].id + ">" + res.data.types[
								i].name + "</option>")
						}
						var tagHtml = $("#tag");
						tagHtml.append("<option>请选择</option>");
						for (var i = 0; i < res.data.tags.length; i++) {
							tagHtml.append("<option name=" + res.data.tags[i].name + " value=" + res.data.tags[i].id + ">" + res.data.tags[
								i].name + "</option>")
						}
					}
				}
			})
		}

		function blogEditInit() {
			$.ajax({
				url: urlPath + "/blog/api/getBlogEditData",
				type: "post",
				data: {
					id: blogId
				},
				success: function(res) {
					if (res.code == 200) {
						var data = res.data;
						console.info(data);
						$('#flag').val(data.flag);
						$('#title').val(data.title);
						contentEdit(data);
						$('#type').val(data.typeId);
						$('#tag').val(data.tagId);
						$('#firstPicture').val(data.firstPicture);
						if(data.files.length > 0) {
							for(var i = 0; i < data.files.length; i++) {
							 $('#uploadDiv').append('<div class = "ui orange item button i-padded-tb" id=ele' + i + '>' + data.files[i].fileName + '<i class="x icon i-padded-lr-tinny-responsive" onclick=delSignFile(' + data.files[i].id + ',this)></i></div>');
							}
						}
						$('#description').val(data.description);
						if(data.recommend){
							$('input[name="recommend"]').prop('checked',true);
						}else{
							$('input[name="recommend"]').prop('checked',false);
						}
						if(data.shareStatement){
							$('input[name="shareStatement"]').prop('checked',true);
							$('#reprintDiv').show();
							$('#reprintAddr').val(data.reprintAddr);
							$('#reprintFrom').val(data.reprintFrom);
							$('#github').val(data.github);
							$('#mayun').val(data.mayun);
							$('#qrcode').val(data.qrcode);
						}else{
							$('input[name="shareStatement"]').prop('checked',false);
							$('#reprintDiv').hide();
							
						}
						if(data.appreciation){
							$('input[name="appreciation"]').prop('checked',true);
						}else{
							$('input[name="appreciation"]').prop('checked',false);
						}
						if(data.commentabled){
							$('input[name="commentabled"]').prop('checked',true);
						}else{
							$('input[name="commentabled"]').prop('checked',false);
						}
					}
				}
			})
		}
		
		function contentEdit(data) {
			contentEditor = editormd("md-content", {
				width: "100%",
				height: 640,
				syncScrolling: "single",
				path: "../static/lib/editormd/lib/",
				saveHTMLToTextarea: true,
				flowChart: true, // 开启流程图支持，默认关闭
				/* 上传图片配置 */
				imageUpload: true,
				imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
				imageUploadURL:mdurlPath+"/upload/api/uploadImage", //注意你后端的上传图片服务地址
				onload: function() {
					contentEditor.setMarkdown(data.content);
					//引入图片截图插件
					editormd.loadPlugin("../static/lib/editormd/plugins/image-hanle-paste/image-handle-paste",function(){
						contentEditor.imagePaste();
					});
				}
			});
		}
		
		function delSignFile(id, i) {
			confirmLayer(id,i);
		}
		
		function confirmLayer(id,i) {
			layer.open({
				offset: 'auto',
				content: '确认删除吗?',
				btn: ['确认', '关闭'],
				yes: function(index, layero) {
					$.ajax({
						type: "post",
						url: urlPath + "/upload/api/delFile",
						async: true,
						data: {
							'id': id
						},
						success: function(res) {
							if(res.code == 200) {
								$(i).parent().remove();
							}
						}
					});
					layer.closeAll();
				},
				btn2: function(index, layero) {
					layer.close();
				},
				shade: 0,
			});
		}
		
		$('#shareStatement').change(function(){
			if($('input[name="shareStatement"]').prop('checked')){
				$('#reprintDiv').show();
			}else{
				$('#reprintDiv').hide();
			}
		})
		
		
		
		
/*		var formData = new FormData();
		
		function mdUpload(file) {
			upload_file(file);
		}
		
		function upload_file(file){
			formData.append("editormd-image-file", file);
			$.ajax({
				type:"post",
				url:urlPath + "/upload/api/uploadImage",
				data:formData,
				dataType : "json",
				processData: false,
				contentType: false,
				success:(function(res){
					document.getElementById('json-body-ht').innerText = JSON.stringify(res);
				})
			});
		}*/
	</script>

</html>
